<template>
	<!-- 报表 -->
	<div class="reportForm">
		<div class="filterBar">
			<div class="filterBtn left">
				<i class="iconfont icon-filter"></i>
				<span>时间</span>
				<span class="divisionLine">|</span>
			</div>
			<div class="condition">
				<span>1月</span>
				<i></i>
			</div>
			<div class="filterBtn right">
				<span class="divisionLine">|</span>
				<i class="iconfont icon-conditions"></i>
				<span>筛选</span>
			</div>
		</div>
		<div class="moneyInfo">
			<div :class="[{'active': type == '支出'}]" @click="chartBtnClick('支出')"><span>{{outcomeData.total}}</span><br/><label>总支出</label></div>
			<div :class="[{'active': type == '收入'}]" @click="chartBtnClick('收入')"><span>{{incomeData.total}}</span><br/><label>总收入</label></div>
			<div :class="[{'active': type == ''}]" @click="chartBtnClick('')"><span>{{incomeData.total - outcomeData.total}}</span><br/><label>总结余</label></div>
			<!-- <i></i> -->
		</div>
		<div class="chartPane">
			<div class="chartBtn">
				<div :class="['pieBtn', {'active' : chartBtn == 'pie'}]" @click="pieClick">饼图</div>
				<div :class="['lineBtn', {'active' : chartBtn == 'line'}]" @click="lineClick">折线图</div>
			</div>
			<div class="chart" id="chart"></div>
			<div class="chartShareBtn"><i class="iconfont icon-share"></i></div>
			<div class="chartList">
				<template v-for="(item, index) in getPieDatas">
					<div><div>{{item.name}}</div><div>{{item.value}}&nbsp;&gt;</div></div>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
// @ is an alias to /src
import Charts from '@jiaminghi/charts';

export default {
  name: 'ReportForm',
  components: {
	
  },
  data(){
	  return {
		  chartBtn: 'pie',
		  myChart: undefined,
		  piedata: [],
		  type: '支出',
		  outcomeData: {
			total: 0,
			datas: []
		  },
		  incomeData: {
			total: 0,
			datas: []
		  },
	  }
  },
  updated(){
	  
  },
  mounted(){
	var user_id = localStorage.getItem("user_id");
  	const container = document.getElementById('chart');
  	this.myChart = new Charts(container);
	this.axios.get("getPieReportFormData?user_id=" + user_id).then((res)=>{
		for(var i = 0; i < res.data.length; i++){
			if(res.data[i]._id.type == '收入'){
				this.incomeData.total += res.data[i].total;
				this.incomeData.datas.push({
					name: res.data[i]._id.type_name,
					value: res.data[i].total
				})
			} else if(res.data[i]._id.type == '支出'){
				this.outcomeData.total += res.data[i].total;
				this.outcomeData.datas.push({
					name: res.data[i]._id.type_name,
					value: res.data[i].total
				})
			}
		}
		this.myChart.setOption({
		  series: [
			{
			  type: 'pie',
			  data: this.outcomeData.datas,
			  radius: ['60%', '80%'],
			  insideLabel: {
				show: true
			  }
			}
		  ]
		})
	});
  },
  computed: {
	getPieDatas(){
		if(this.type == '支出') return this.outcomeData.datas;
		if(this.type == '收入') return this.incomeData.datas;
		if(this.type == ''){
			var datas = [];
			datas.push({
				name: '总支出',
				value: this.outcomeData.total
			});
			datas.push({
				name: '总收入',
				value: this.incomeData.total
			});
			return datas;
		}
	}  
  },
  methods: {
	  chartBtnClick(type){
		this.type = type;
		if(this.type == '支出'){
			this.myChart.setOption({
			  series: [
				{
				  type: 'pie',
				  data: this.outcomeData.datas,
				  radius: ['60%', '80%'],
				  insideLabel: {
					show: true
				  }
				}
			  ]
			})
		}
		if(this.type == '收入'){
			this.myChart.setOption({
			  series: [
				{
				  type: 'pie',
				  data: this.incomeData.datas,
				  radius: ['60%', '80%'],
				  insideLabel: {
					show: true
				  }
				}
			  ]
			})
		}
		if(this.type == ''){
			var datas = [];
			datas.push({
				name: '总支出',
				value: this.outcomeData.total
			});
			datas.push({
				name: '总收入',
				value: this.incomeData.total
			});
			this.myChart.setOption({
			  series: [
				{
				  type: 'pie',
				  data: datas,
				  radius: ['60%', '80%'],
				  insideLabel: {
					show: true
				  }
				}
			  ]
			})
		}
	  },
	  pieClick(){
		  this.chartBtn = 'pie';
		  this.chartBtnClick(this.type);
	  },
	  lineClick(){
		  this.chartBtn = 'line';
		 //  this.myChart.setOption({
			// xAxis: {
			// 	data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			// },
			// yAxis: {
			// 	name: '销售额',
			// 	data: 'value'
			// },
			// series: [
			// 	{
			// 	  data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
			// 	  type: 'line'
			// 	}
			// ]
		 //  })
	  }
  }
}
</script>

<style>
.reportForm{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.filterBar{
	top: 44px;
	width: 100%;
	height: 40px;
	position: fixed;
	background-color: white;
	z-index: 1;
}
.filterBtn{
	height: 40px;
	padding-right: 10px;
	position: absolute;
	background-color: white;
	top: 0;
}
.filterBtn.left{
	left: 0;
}
.filterBtn.right{
	right: 0;
}
.filterBtn>i{
	position: relative;
	top: 5px;
	cursor: pointer;
}
.divisionLine{
	line-height: 40px;
	margin: 0 8px;
}
.condition{
	height: 40px;
	line-height: 40px;
	position: relative;
}
.condition>span{
	margin: 0 10px;
}
.condition>i{
	position: absolute;
	display: inline-block;
	width: 0;
	height: 0;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	border: 6px solid;
	border-color: transparent transparent red;
}

.moneyInfo{
	height: 60px;
	top: 84px;
	width: 100%;
	display: flex;
	justify-content: space-around;
	border-top: 1px solid #DCDCDC;
	border-bottom: 1px solid #DCDCDC;
	position: fixed;
	background-color: white;
	z-index: 1;
}
.moneyInfo>div{
	padding-top: 10px;
}
.moneyInfo>div.active{
	color: red;
}
.moneyInfo>div>label{
	font-size: 14px;
}
.moneyInfo>i{
	position: absolute;
	display: inline-block;
	width: 0;
	height: 0;
	left: calc(100%/6);
	transform: translateX(-50%);
	bottom: -12px;
	border: 6px solid;
	border-color: red transparent transparent;
}
.chartPane{
	margin-top: 146px;
	box-sizing: content-box;
	border: 1px solid transparent;
}
.chartBtn{
	margin: 10px;
	display: flex;
	position: relative;
	height: 26px;
}
.chartBtn>div{
	position: absolute;
	border: 1px solid #DCDCDC;
	width: 70px;
	height: 24px;
	line-height: 24px;
}
.chartBtn>div.active{
	border-color: red;
	color: red;
}
.chartBtn>.pieBtn{
	right: 50%;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}

.chartBtn>.lineBtn{
	left: 50%;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}
.chart{
	width: 100%;
	height: 200px;
	margin: 50px 0 20px;
}
.chartShareBtn{
	height: 35px;
	border-bottom: 1px solid #DCDCDC;
	position: relative;
}
.chartShareBtn>i{
	position: absolute;
	right: 10px;
}
.chartList{
	margin-bottom: 49px;
	background-color: white;
}
.chartList>div{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #DCDCDC;
}
.chartList>div>div{
	width: calc(100%/3);
	height: 40px;
	line-height: 40px;
}
</style>